<template>
  <div class="canvas" @drop="drop" @dragover="dragover">
    <DynamicDrawVue :views="views"></DynamicDrawVue>
  </div>
</template>

<script>
import {nanoid} from "nanoid"
import commonData from './data/commonData'
import DynamicDrawVue from './DynamicDraw.vue'
import deepCopy from "../utils/deepCopy";
import myExportToHTML from "../utils/exportToHTML";
import {BasicHtml} from "../components/data/basicHTML";
 import {saveAs} from "file-saver";
// import {deepClone} from "../utils/deepClone";
export default {
    name:"centerVue",
    data(){
        return{
            views:[],
            currView:{}
        }
    },
    methods:{
        dragover(e){
              e.preventDefault()  
        },
        drop(e){
            e.preventDefault()
            // console.log(e.offsetX,e.offsetY);
            let componentFlag=e.dataTransfer.getData("flag");
            let menuComponentOffsetX=e.dataTransfer.getData("menuComponentOffsetX");
            let menuComponentOffsetY=e.dataTransfer.getData("menuComponentOffsetY");
            // console.log(componentFlag,menuComponentOffsetX,menuComponentOffsetY,"getdata");
            let finalX=e.offsetX-menuComponentOffsetX;
            let finalY=e.offsetY-menuComponentOffsetY;
            // console.log(finalX,finalY);
            // console.log(commonData[0][componentFlag]);
            let id=nanoid();
            commonData[componentFlag].id=id;
            let newElement=deepCopy(commonData[componentFlag]);
            // let newElement=deepClone(commonData[componentFlag]);
            this.createElement(newElement,finalX,finalY,(res)=>{
                this.$bus.$emit("giveView",res);
            });
        },
        createElement(element,x,y,callback,positionMode="absolute"){
            console.log(element,"createElement");
            element.style.position=positionMode;
            element.style.top=y+"px";
            element.style.left=x+"px";
            this.views.push(element);
           this.updataCurrView(element);
           if(callback) callback(element);
        },
        updataCurrView(element){
            // 确实好像不需要判断，我只需要保证每次赋值之前都是一个空对象就行了
            // if(Object.keys(this.currView).length!=0){
                this.currView={};
            // }
                 for (const key in element) {
                if (Object.hasOwnProperty.call(element,key)) {
                    this.currView[key]=element[key];
                }
            }
        },
        changeElementStyle(element,id,styleObj){
            //for in会将对象的属性和原型上的属性一块遍历出来,顺序是先对象属性然后是原型链上的属性
            //如果需要过滤掉原型链上的属性，可以使用asOwnProperty()方法
            //或者使用Object.keys()是ES5新增的一个对象方法，该方法返回对象自身属性名组成的数组，
            //他会自动过滤掉原型链上的属性，然后可以通过数组的forEach()方法来遍历。
            console.log("changeElementStyle");
            if(!id===element.id) return console.log("return");
            for(let key in styleObj){
                if(Object.prototype.hasOwnProperty.call(styleObj,key)){
                    element.textStyle.key=styleObj[key];
                }
            }
        },
        exportToHTML(){
           let bodyStr= myExportToHTML.getBodyStr(this.views)
           let styleStr= myExportToHTML.getStyleStr(this.views)
            // console.log(bodyStr);
            console.log(styleStr);
           let HTMLStr= BasicHtml(bodyStr,styleStr);
           console.log(HTMLStr);
           console.log(saveAs);
        //    let blob=new blob([HTMLStr],{type:''});
        let blob=new Blob([HTMLStr]);
           saveAs(blob,"myPage.html");
        }
    },
    components:{
        DynamicDrawVue
    },
    watch:{
        views:{
            immediate:true,
            handler(){
                this.$bus.$emit("giveViews",this.views);
            }
        },
        currView:{
            immediate:true,
            deep:true,
            handler(){
                this.$bus.$emit("giveCruuViews",this.currView);
            }
        }
        
    },
    mounted(){
        this.$bus.$emit("givechangeElementStyle",this.changeElementStyle);
         this.$bus.$on("givechangeCurrViewViews",this.updataCurrView);
         this.$bus.$on("exportToHTML",this.exportToHTML);
    }
}
</script>

<style scoped>
.canvas{
    width: 600px;
    height: 600px;
    position: relative;
    background-color: #c4f6fd;
}
</style>